<template>
  <div>
    <el-input
      placeholder="请输入搜索内容"
      style="width: 400px"
      v-model="value"
      @blur="search"
    ></el-input
    ><el-button type="primary" @click="$router.push('add')">添加商品</el-button>
    <!-- 表格 -->
    <el-table :data="goodslist" style="width: 100%">
      <el-table-column type="index" width="50"> </el-table-column>
      <el-table-column prop="goods_name" label="商品名称"></el-table-column>
      <el-table-column prop="goods_price" label="商品价格"></el-table-column>
      <el-table-column prop="goods_weight" label="商品重量"></el-table-column>
      <el-table-column prop="upd_time" label="创建时间">
        <template slot-scope="scope">
          {{ scope.row.upd_time | filterdate }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button
          >
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pages.pagenum"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pages.pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { goods, delslist } from "../utils/api";
export default {
  data() {
    return {
      value: "", //搜索
      goodslist: [], //商品列表数据
      pages: {
        pagenum: 1,
        pagesize: 5,
      },
      total: 0,
    };
  },
  methods: {
   
    // 搜索
    search() {
      this.goodslist = this.goodslist.filter((item) => {
        return item.goods_name.includes(this.value);
      });
    },
    // 编辑
    handleEdit(index, row) {
      console.log(index, row);
    },
    // 删除
    handleDelete(row) {
      console.log(row);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        delslist(row.goods_id)
          .then((res) => {
            console.log(res);
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.datalist();
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除",
            });
          });
      });
    },
    // 分页
    handleSizeChange(val) {
      this.pages.pagesize = val;
      this.datalist();
    },
    handleCurrentChange(val) {
      this.pages.pagenum = val;
      this.datalist();
    },
    datalist() {
      goods(this.pages).then((res) => {
        console.log(res);
        this.goodslist = res.data.data.goods;
        this.total = res.data.data.total;
      });
    },
  },
  created() {
    this.datalist();
  },
  mounted() {},
  components: {},
  computed: {},
  watch: {},
  filters: {
    filterdate(val) {
      let data = new Date(val * 1000).toLocaleString();
      return data;
    },
  }
};
</script>

<style lang="scss" scoped></style>
